<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM查询</title>
    <script>
        function f1() {
            let btn = document.getElementById("btn");
            console.log(btn)
        }

        function f2() {
            let btns = document.getElementsByName("btn");
            console.log(btns);
        }

        function f3() {
            let btns = document.getElementsByTagName("button");
            console.log(btns);
        }

        function f4() {
            // 返回匹配到的第一个元素
            // let btn = document.querySelector("#btn")
            let btn = document.querySelector(".c1")
            console.log(btn)
            // 返回匹配到的所有元素
            let btns = document.querySelectorAll(".c1")
            console.log(btns);
        }
    </script>
</head>
<body>
<button class="c1" id="btn" name="btn" onclick="f1()">根据id属性查询</button>
<br>
<button class="c1" name="btn" onclick="f2()">根据name属性查询</button>
<br>
<button class="c1" onclick="f3()">根据标签名查询</button>
<br>
<button onclick="f4()">根据选择器查询</button>
<br>
</body>
</html>